<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>设置</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>

      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">员工管理</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input  placeholder="请输入员工姓名" clearable v-model="empname" @clear="searchEmp">
            <el-button slot="append" icon="el-icon-search" @click="searchEmp"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>



    <el-card style="margin-top: 30px">
      <el-row :gutter="20">
        <el-col :span="2">
          <el-button type="primary" size="mini" @click="showAddEmpDialog">+ 添加</el-button>
        </el-col>
      </el-row>


      <el-table :data="empList" border stripe>
        <el-table-column type="index"></el-table-column>

        <el-table-column label="员工姓名" prop="empname"></el-table-column>
        <el-table-column label="登录账号" prop="empaccount"></el-table-column>
        <el-table-column label="角色" prop="rolename"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="s">
            <span v-text="s.row.status==1?'已激活':'未激活'"></span>
          </template>
        </el-table-column>
        <el-table-column label="添加人" prop="operator"></el-table-column>
        <el-table-column label="添加时间" prop="inserttime"></el-table-column>


        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showEmpeditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeEmpById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[4, 10 , 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>


    <div>
      <!--添加菜单-->
      <el-dialog title="添加员工" :visible.sync="addEmpFormVisible" @close="closeAddDialog">
        <el-form
            :model="addEmpForm"
            :rules="addEmpFormRules"
            ref="addEmpFormRef"
            label-width="200px"
            label-position="right"
            size="small"
            class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="empname">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="addEmpForm.empname"></el-input>
              </el-col>
            </el-row>
          </el-form-item>


          <el-form-item label="账户信息（手机号）:" prop="empaccount">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="addEmpForm.empaccount"></el-input>
              </el-col>
            </el-row>
          </el-form-item>


          <el-form-item label="密码:" prop="emppassword">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input type="password" v-model="addEmpForm.emppassword" autocomplete="off"></el-input>
              </el-col>
            </el-row>
          </el-form-item>



          <el-form-item label="赋予角色" prop="roleid">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-select v-model="addEmpForm.roleid" placeholder="请选择角色">
                <el-option v-for="r in roleList" :label="r.rolename" :value="r.id"></el-option>
              </el-select>
            </el-col>
          </el-row>
          </el-form-item>


          <el-form-item label="是否冻结" prop="status">
            <el-radio v-model="addEmpForm.status" :label="1">激活</el-radio>
            <el-radio v-model="addEmpForm.status" :label="0">冻结</el-radio>
          </el-form-item>


          <el-form-item label="头像" prop="">
            <el-row :gutter="20">
              <el-col :span="5">
                <el-input type="hidden" v-model="addEmpForm.empheadportrait"></el-input>
                <el-upload
                    class="avatar-uploader"
                    :action="addEmpUrl"
                    :show-file-list="false"
                    name="addempheadportrait"
                    :on-success="handleAvatarSuccessAddEmp"
                    :before-upload="beforeAvatarUploadAddEmp">
                  <img v-if="addEmpimageUrl" :src="addEmpimageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon el-upload"></i>
                </el-upload>
              </el-col>
            </el-row>

          </el-form-item>

          <el-form-item label="微信" prop="empwechat">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="addEmpForm.empwechat"></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="QQ" prop="empqq">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="addEmpForm.empqq"></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="员工介绍" prop="empintroduction">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="addEmpForm.empintroduction"></el-input>
              </el-col>
            </el-row>
          </el-form-item>


        </el-form>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button type="primary" @click="addEmp">确 认</el-button>
            <el-button @click="closeAddDialog">取 消</el-button>
          </el-col>
        </el-row>

      </el-dialog>
    </div>


    <div>
      <!--修改菜单-->
      <el-dialog title="修改员工" :visible.sync="editEmpFormVisible" @close="closeeditDialog">
        <el-form
            :model="editEmpForm"
            :rules="editEmpFormRules"
            ref="editEmpFormRef"
            label-width="200px"
            label-position="right"
            size="small"
            class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="empname">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="editEmpForm.empname"></el-input>
              </el-col>
            </el-row>
          </el-form-item>


          <el-form-item label="账户信息（手机号）:" prop="empaccount">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="editEmpForm.empaccount"></el-input>
              </el-col>
            </el-row>
          </el-form-item>


          <el-form-item label="密码:" prop="emppassword">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input type="password" v-model="editEmpForm.emppassword" autocomplete="off"></el-input>
              </el-col>
            </el-row>
          </el-form-item>



          <el-form-item label="赋予角色" prop="roleid">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-select v-model="editEmpForm.roleid" placeholder="请选择角色">
                  <el-option v-for="r in roleList" :label="r.rolename" :value="r.id"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>



          <el-form-item label="是否冻结" prop="status">
            <el-radio v-model="editEmpForm.status" :label="1">激活</el-radio>
            <el-radio v-model="editEmpForm.status" :label="0">冻结</el-radio>
          </el-form-item>


          <el-form-item label="头像" prop="">
            <el-row :gutter="20">
              <el-col :span="5">
                <el-input type="hidden" v-model="editEmpForm.empheadportrait"></el-input>
                <el-upload
                    class="avatar-uploader"
                    :action="editEmpUrl"
                    :show-file-list="false"
                    name="editempheadportrait"
                    :on-success="handleAvatarSuccessEditEmp"
                    :before-upload="beforeAvatarUploadEditEmp">
                  <img v-if="editEmpimageUrl" :src="editEmpimageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon el-upload"></i>
                </el-upload>
              </el-col>
            </el-row>

          </el-form-item>

          <el-form-item label="微信" prop="empwechat">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="editEmpForm.empwechat"></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="QQ" prop="empqq">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="editEmpForm.empqq"></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="员工介绍" prop="empintroduction">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="editEmpForm.empintroduction"></el-input>
              </el-col>
            </el-row>
          </el-form-item>


        </el-form>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button type="primary" @click="editEmp">确 认</el-button>
            <el-button @click="closeeditDialog">取 消</el-button>
          </el-col>
        </el-row>

      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      roleList:[],
      empname: "",
      pageNum: 1,
      pageSize: 4,
      total: 9,
      empList: [],
      addEmpUrl: this.$MyUrl.serverUrl + 'emp/uploadAdd',//添加封面上传地址
      addEmpimageUrl:'',
      addEmpFormVisible:false,
      addEmpForm:{
        empname: "",
        empaccount: "",
        emppassword: "",
        status: 1,
        empheadportrait: "",
        empqq: "",
        empwechat: "",
        empintroduction: "",
        operator: "",
        inserttime: "",
        updatetime: "",

        roleid:'',
        rolename:'',

      },
      addEmpFormRules: {
        empname: [
          {required: true, message: "請輸入姓名", trigger: "blur"},
          {min: 2, max: 16, message: "姓名必须是2-16个字符", trigger: "blur"}
        ],
        empaccount: [
          {required: true, message: "請輸入账号", trigger: "blur"},
          {min: 11, max: 11, message: "手机号长度在11位数字", trigger: "blur"}
        ],
        emppassword: [
          {required: true, message: "請輸入密码", trigger: "blur"},
        ],
        roleid: [
          {required: true, message: "請选择角色", trigger: "blur"},
        ],
      },
      editEmpUrl:this.$MyUrl.serverUrl + 'emp/upload5',//上传地址
      editEmpimageUrl:'',
      iurl: this.$MyUrl.imgUrl+'manager/',//图片地址
      editEmpFormVisible:false,
      editEmpForm:{
        empname: "",
        empaccount: "",
        emppassword: "",
        status: 1,
        empheadportrait: "",
        empqq: "",
        empwechat: "",
        empintroduction: "",
        operator: "",
        inserttime: "",
        updatetime: "",


        roleid:'',
        rolename:'',

      },
      editEmpFormRules: {
        empname: [
          {required: true, message: "請輸入姓名", trigger: "blur"},
          {min: 2, max: 16, message: "姓名必须是2-16个字符", trigger: "blur"}
        ],
        empaccount: [
          {required: true, message: "請輸入账号", trigger: "blur"},
          {min: 11, max: 11, message: "手机号长度在11位数字", trigger: "blur"}
        ],
        emppassword: [
          {required: true, message: "請輸入密码", trigger: "blur"},
        ],

      roleid: [
        {required: true, message: "請选择角色", trigger: "blur"},
      ],

      },


    };
  },
  methods: {

    //删除emp
    removeEmpById(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url ="emp/del/"+id;
        this.$axios.delete(url).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },




    //显示编辑窗口
    showEmpeditDialog(row) {
      this.editEmpFormVisible = true;
      this.editEmpForm = row;
      this.editEmpimageUrl=this.iurl+this.editEmpForm.empheadportrait;   //头像反显
    },
    //关闭编辑窗口
    closeeditDialog(){
      this.editEmpFormVisible = false;
      this.$refs.editEmpFormRef.resetFields();
      this.reloadData();
    },
    //编辑头像
    handleAvatarSuccessEditEmp(res, file) {
      this.editEmpimageUrl = URL.createObjectURL(file.raw);
      this.editEmpForm.empheadportrait = res.data;
    },
    //添加头像
    beforeAvatarUploadEditEmp(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //编辑emp
    editEmp() {
      this.$refs.editEmpFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "emp/edit"
        this.$axios.put(url, this.editEmpForm).then(res => {
          if (res.data.code = 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.editEmpFormVisible = false;
            this.reloadData();

          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      })
    },



    //显示添加模态框
    showAddEmpDialog(){
      this.addEmpFormVisible=true;
    },
    //关闭添加模态框
    closeAddDialog(){
      this.addEmpFormVisible=false;
      this.$refs.addEmpFormRef.resetFields();
      this.reloadData();
    },
    //添加头像
    handleAvatarSuccessAddEmp(res, file) {
      this.addEmpimageUrl = URL.createObjectURL(file.raw);
      this.addEmpForm.empheadportrait = res.data;
    },
    //添加头像
    beforeAvatarUploadAddEmp(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //添加
    addEmp() {
      this.$refs.addEmpFormRef.validate(valid => {
        if (!valid) {
          return;
        }


        let userjs =sessionStorage.getItem('userInfo');
        let user=JSON.parse(userjs);
        this.addEmpForm.operator=user.empaccount;


        let url = "emp/add"
        this.$axios.post(url, this.addEmpForm).then(res => {
          if (res.data.code = 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.addEmpFormVisible = false;
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      })
    },



    //根据名字查所有emp
    getEmpList() {
      let url = "emp/elist";
      this.$axios.get(url, {
        params: {
          name: this.empname,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.empList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;


        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },
    searchEmp() {
      this.pageNum = 1;
      this.getEmpList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getEmpList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getEmpList();
    },
    //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
    getRoleNames(arr) {
      if (!arr) return;
      let roleNameArr = new Array();
      for (let i = 0; i < arr.length; i++) {
        roleNameArr.push(arr[i].name);
      }
      return roleNameArr.join(",");
    },
    getRoleList() {
      let url = "role/rolelist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.roleList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },



    reloadData() {
      this.searchEmp();
      this.getRoleList();
    }
  },
  created() {
    this.reloadData();

  }
};
</script>
<style lang="less" scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avata {
  width: 178px;
  height: 178px;
  display: block;
}
</style>